<template>
    <BaseContainer>
        <el-card>
            <template #header>
                <div class="f-between">
                    <span>归档周期</span>
                    <el-popover placement="top-start" title="修改周期" :width="320" trigger="click">
                        <AplidForm ref="formRef" v-bind="ArchFormConfig" v-model="copyModel[0]" @submit="onSubmit"> </AplidForm>
                        <template #reference>
                            <el-button type="primary">修改</el-button>
                        </template>
                    </el-popover>
                </div>
            </template>
            <div class="left flex1">
                <p>填报任务默认归档周期：任务下发开始，直到任务结束，每隔一段时间对填报数据归档一次</p>
                <p>当前周期: {{model[0]['configValue']}}天</p>
            </div>
        </el-card>

        <el-card class="mt10">
            <template #header>
                <div class="f-between">
                    <span>预警提示</span>
                    <el-popover placement="top-start" title="修改天数" :width="320" trigger="click">
                        <AplidForm ref="formRef" v-bind="FormConfig" v-model="copyModel[1]" @submit="onSubmit"> </AplidForm>
                        <template #reference>
                            <el-button  type="primary">修改</el-button>
                        </template>
                    </el-popover>
                </div>
            </template>
            <div class="left flex1">
                <p>填报任务预警提前量：填报任务即将到截至日期，提前几日开始每日提醒</p>
                <p>当前日期: 截至日期{{model[1]['configValue']}}天</p>
            </div>
        </el-card>

        <el-card class="mt10">
            <template #header>
                <div class="f-between">
                    <span>数值标红提示阈值</span>
                    <el-popover placement="top-start" title="修改阈值" :width="320" trigger="click">
                        <AplidForm ref="formRef" v-bind="TipConfig" v-model="copyModel[2]" @submit="onSubmit"> </AplidForm>
                        <template #reference>
                            <el-button  type="primary">修改</el-button>
                        </template>
                    </el-popover>
                </div>
            </template>
            <div class="left flex1">
                <p>填报任务时数值标红提示的阈值：数值多次填报，上下浮动百分之多少时，会标红并点击会显示上次的数值</p>
                <p>当前阈值:{{model[2]['configValue']*100}}%</p>
            </div>
        </el-card>
    </BaseContainer>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import apiMod from '@/apiMod'
import {cloneDeep} from 'lodash-es'


const model:any = ref([{configValue:0},{configValue:0},{configValue:0}])
const ArchFormConfig = {
    title: '归档周期',
    labelWidth: '100px',
    inline: false,
	showBtn: true,
    showReset:false,
	labelPosition: 'top',
    size:'small',
    column: [
        {
            label: '',
            prop: 'configValue',
            type: 'input',
            span:24,
            rules: [
                {
                    required: true,
                    message: '请输入（天）',
                },
                {
                    validator: (rule,val,callback) => {
                        if(typeof Number(val)!='number'){
                            callback(new Error('请输入数值'))
                        }else if(val>=1){
                            callback()
                        }else{
                            callback(new Error('请输入大于等于1的值'))
                        }
                    },
                    trigger: 'blur'
                }
            ],
        },
    ],
}
const FormConfig = {
    title: '预警设置',
    labelWidth: '100px',
    inline: false,
	showBtn: true,
    showReset:false,
	labelPosition: 'top',
    size:'small',
    column: [
        {
            label: '',
            prop: 'configValue',
            type: 'input',
            span:24,
            rules: [
                {
                    required: true,
                    message: '请输入（单位：天)',
                },
                {
                    validator: (rule,val,callback) => {
                        if(typeof Number(val)!='number'){
                            callback(new Error('请输入数值'))
                        }else if(val>=1){
                            callback()
                        }else{
                            callback(new Error('请输入大于等于1的值'))
                        }
                    },
                    trigger: 'blur'
                }
            ],
        },
    ],
}
const TipConfig = {
    title: '数值标红提示阈值',
    labelWidth: '100px',
    inline: false,
	showBtn: true,
    showReset:false,
	labelPosition: 'top',
    size:'small',
    column: [
        {
            label: '',
            prop: 'configValue',
            type: 'input',
            span:24,
            rules: [
                {
                    required: true,
                    message: '请输入范围0-1',
                },
                {
                    validator: (rule,val,callback) => {
                        if(typeof Number(val)!='number'){
                            callback(new Error('请输入数值'))
                        }else if(val>=0&&val<=1){
                            callback()
                        }else{
                            callback(new Error('请输入范围0-1'))
                        }
                    },
                    trigger: 'blur'
                }
            ],
        },
    ],
}


const onSubmit = (form,done)=> {
    const baseApi = form.id?'view_zwglTaskConfig_edit':'view_zwglTaskConfig_add'
    console.log('查看',baseApi)
    apiMod[baseApi]({...form}).then(res => {
        ElMessage.success('修改成功')
        getInitData()
    })
    done()
}
let copyModel = ref({})
const getInitData = ()=> {
    apiMod.view_zwglTaskConfig_page({
        pageParaPO:{
            current:1,
            size:10
        }
    }).then(res => {
        if(res.code==0){
            const {records} = res.data
            if(records.length>0) {
                model.value = records
                copyModel.value = cloneDeep(records)
            }
        }
    })
}
onMounted(()=> {
    getInitData()
})
</script>

<style scoped></style>